<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <figure>
        <figcaption>视频播放器</figcaption>
        <div class="player">
            <video src="./video/fun.mp4"></video>
            <div class="controls">
                <!-- 播放/暂停 -->
                <span class="iconfont iconicon- switch"></span>
                <!-- 播放进度 -->
                <div class="progress">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
                <!-- 当前播放时长/总时长 -->
                <div class="timer">
                    <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
                </div>
                <!-- 全屏 -->
                <span class="iconfont iconquanping expand"></span>
            </div>
        </div>
    </figure>
</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
    // 这些api 是原生js的操作 我们使用jq 要记得转换
    // 第一步 获取元素
    var video = $('video').get(0); //把jq转换为dom
    // 计算时分秒
    function formatTime(time){
        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = Math.floor(time % 60);
        return (h > 10 ? h : '0'+ h) + ':'+ (m > 10 ? m : '0'+ m) +':'+ (s > 10 ? s : '0'+ s)

    }
    // 1.当浏览器可以播放视频的时候 让video 显示出来
    // 视频加载完毕后 发生canplay事件  让时间显示
    video.oncanplay = function() {
        $('video').show();  //jq方法
        // duration  是视频的属性 返回视频的长度 秒为单位
        // console.log(this.duration);  //164.815238
        var totalTime = formatTime(this.duration);
        // console.log(totalTime);
        // 总时长
        $('.total').html(totalTime)
    }
    // 第二步  播放/暂停按钮
    $('.switch').on('click',function(){
        if ($(this).hasClass('iconicon-')) {
            video.play(); //播放视频
            $(this).addClass('iconpause').removeClass('iconicon-'); //切换图标
        } else {
            video.pause(); //暂停视频
            $(this).addClass('iconicon-').removeClass('iconpause'); //切换图标
        }
    })
    // 第三步  进度条显示
    // 只要修改video.currentTime 就会触发ontimeupdate
    video.ontimeupdate = function() {
        // 需要知道当前时间
        // console.log(this.currentTime);
        var w = video.currentTime / video.duration *100 +'%'; //获取line进度
        // console.log(w);
        $('.line').css('width',w)
        // 显示当前时间
        var currentTime = formatTime(this.currentTime);
        $('.current').html(currentTime);
    }
    // 第四步 全屏
    $('.expand').on('click',function() {
        if ($(this).hasClass('iconquanping')) {
            video.webkitRequestFullscreen(); //全屏显示 未做兼容
            $(this).addClass('iconquxiaoquanping').removeClass('iconquanping');
        }else{
            document.webkitCancelFullScreen(); //取消全屏
            $(this).addClass('iconquanping').removeClass('iconquxiaoquanping');
        }
    })
    // 判断是否是全屏状态 图标切换 
    document.addEventListener('fullscreenchange', exitHandler);
    document.addEventListener('webkitfullscreenchange', exitHandler);
    document.addEventListener('mozfullscreenchange', exitHandler);
    document.addEventListener('MSFullscreenChange', exitHandler);

    function exitHandler() {
        if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            $('.expand').addClass('iconquanping').removeClass('iconquxiaoquanping');                
        }
    }  
        
    // 第五步 视频结束之后 重置操作
    video.onended = function() {
        // 当前的视频时间清零
        video.currentTime = 0;
        //   播放按钮改成播放状态
        $('.switch').addClass('iconicon-').removeClass('iconpause'); //切换图标        
    }
    // 第六步  快进效果
    $('.bar').on('click',function(event) {
        // 点击的位置 / bar的长度 * 总时长 = 当前视频的播放位置
        var offset = event.offsetX; //点击位置
        // 播放位置
        var current = offset / $(this).width() * video.duration;
        // console.log(current);当前时间
        video.currentTime = current;
    })
    // 第七步 点击视频区 播放和暂停
    $('video').on('click',function(){
        if ($('.switch').hasClass('iconicon-')) {
            video.play(); //播放视频
            $('.switch').addClass('iconpause').removeClass('iconicon-'); //切换图标
        } else {
            video.pause(); //暂停视频
            $('.switch').addClass('iconicon-').removeClass('iconpause'); //切换图标
        }
    })
</script>